<template>
  <page-header-wrapper>
    <page-tab-list>
      <SearchBox @search="search"></SearchBox>
    </page-tab-list>
    <a-card style="margin-top: 11px" :bordered="false" class="card_style_re">
      <div class="table-operator">
        <a-radio-group :defaultValue="-1" v-model="queryParam.status" @change="onOptionChange">
          <a-radio-button v-for="(item, index) in options" :key="index" :value="item.value">
            {{ item.title }}
          </a-radio-button>
        </a-radio-group>
      </div>
      <a-spin :spinning="spinning">
        <ListTable ref="listTable" :list_th="list_th" :pagaData="pagaData" @triggerAction="listActions"> </ListTable>
      </a-spin>
      <div style="float: right">
        <Pagination v-model="pageParams.pageNo" :total="totalCount" show-less-items />
      </div>
    </a-card>
    <SendModal
      :visible.sync="isShowSendModal"
      :expressList="expressList"
      :orderId="orderId"
      :orderInfo="orderInfo"
      @onAfterClose="onAfterClose"
    ></SendModal>
    <AddressModal
      ref="addressModal"
      v-if="isShowAddressModal"
      :visible.sync="isShowAddressModal"
      :orderId="orderId"
      @onAfterClose="onAfterClose"
    ></AddressModal>
    <OrderPrintModal :visible.sync="isShowPrintModal" :order="orderInfo"></OrderPrintModal>
    <OrderExtraFee
      ref="addressModal"
      v-if="isShowOrderExtraFeeModal"
      :visible.sync="isShowOrderExtraFeeModal"
      :orderId="orderId"
      :orderInfo="orderInfo"
      @onAfterClose="onAfterClose"
    >
    </OrderExtraFee>
    <OrderStorage
      ref="addressModal"
      v-if="isShowOrderStorageModal"
      :visible.sync="isShowOrderStorageModal"
      :orderId="orderId"
      :orderInfo="orderInfo"
      @onAfterClose="onAfterClose"
    >
    </OrderStorage>
  </page-header-wrapper>
</template>

<script>
import SendModal from './components/order/SendModal'
import AddressModal from './components/order/AddressModal'
import OrderPrintModal from './components/order/OrderPrint'
import NoBorderRadio from '@/components/NoBorderRadio/NoBorderRadio'
import SearchBox from './components/order/SearchBox'
import OrderExtraFee from './components/order/OrderExtraFee'
import OrderStorage from './components/order/OrderStorage'

import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import moment from 'moment'
import { Pagination } from 'ant-design-vue'
import ListTable from './components/order/ListTable'
import {
  modifyPrice,
  getOrderList,
  orderCancel,
  setComments,
  setAddress,
  orderSend,
  orderConfirm,
  orderPrint,
  orderClerk,
  orderTable,
  orderEdit,
  orderMature,
  orderStorage,
  orderConfirmSelfPickFinish,
  orderConfirmSelfPickBook,
} from '@/api/adopt/order'
export default {
  name: 'OrderList',
  components: {
    ListTable,
    Pagination,
    SendModal,
    AddressModal,
    OrderPrintModal,
    NoBorderRadio,
    SearchBox,
    OrderExtraFee,
    OrderStorage,
  },
  data() {
    return {
      activeTab: '2',
      tabs: [
        {
          value: '0',
          text: '认养列表',
          path: 'AdoptList',
        },
        {
          value: '1',
          text: '认养分类',
          path: 'AdoptCat',
        },
        {
          value: '2',
          text: '认养订单',
          path: 'AdoptOrderList',
        },
        {
          value: '3',
          text: '认养设置',
          path: 'AdoptSetting',
        },
        {
          value: '4',
          text: '设备管理',
          path: 'DeviceList',
        },
        {
          value: '5',
          text: '配送订单',
          path: 'CostOrderList',
        },
      ],
      options: [
        {
          title: '全部',
          value: -1,
        },
        {
          title: '未付款',
          value: 0,
        },
        {
          title: '待成熟',
          value: 1,
        },
        {
          title: '待收取',
          value: 2,
        },
        {
          title: '预约中',
          value: 8,
        },
        {
          title: '待自采',
          value: 9,
        },
        {
          title: '自采中',
          value: 10,
        },
        {
          title: '自采完',
          value: 11,
        },
        {
          title: '待入库',
          value: 12,
        },
        {
          title: '入库中',
          value: 13,
        },
        {
          title: '待保管',
          value: 14,
        },
        {
          title: '保管中',
          value: 15,
        },
        // {
        //   title: '待发货',
        //   value: 1,
        // },
        // {
        //   title: '已发货',
        //   value: 2,
        // },
        {
          title: '已完成',
          value: 3,
        },
        // {
        //   title: '待处理',
        //   value: 6,
        // },
        {
          title: '已取消',
          value: 5,
        },
        {
          title: '回收站',
          value: 7,
        },
      ],
      spinning: false,
      expressList: [],
      list_th: [
        { type: 'list', title: '商品信息', span: 4 },
        { type: 'list', title: '单价/数量', span: 3 },
        // { type: 'list', title: '运费/优惠', span: 2 },
        { type: 'list', title: '订单金额', span: 2 },
        { type: 'list', title: '买家/收货人', span: 3 },
        { type: 'list', title: '下单门店/时间', span: 3 },
        { type: 'list', title: '订单状态', span: 2 },
        { type: 'list', title: '收取方式', span: 2 },
        { type: 'list', title: '是否入库', span: 2 },
        { type: 'list', title: '保管方式', span: 2 },
        { type: 'list', title: '收获重量', span: 2 },
        {
          type: 'list',
          title: '操作',
          span: 3,
          actions: [
            '编辑',
            '成熟',
            '入库',
            '确认自采预约',
            '确认自采完成',
            '发货',
            '取消',
            '核销',
            '确认收货',
            '订单打印',
            '小票打印',
            '添加备注',
            '移入回收站',
            '额外费用',
          ],
        },
      ],
      activeKey: '1',
      locale: zhCN,
      ranges: {
        一月内: () => [moment().startOf('day').subtract(1, 'month'), moment()],
        昨天: () => [moment().startOf('day').subtract(1, 'days'), moment().endOf('day').subtract(1, 'days')],
        最近一周: () => [moment().startOf('day').subtract(1, 'weeks'), moment()],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      queryParam: {
        // 订单号
        // 商品名称
        // 手机号
      },
      selectDate: {},
      totalCount: 0,
      pageParams: {
        pageNo: 1,
        pageSize: 10,
      },
      pagaData: [],
      remark: '',
      isShowSendModal: false,
      isShowOrderExtraFeeModal: false,
      isShowOrderStorageModal: false,
      orderId: '',
      isShowPrintModal: false,
      orderInfo: null,
      isShowExtraFeeModal: false,
    }
  },
  watch: {
    currentPage() {
      this.getOrderListData()
    },
  },
  created() {
    this.getOrderListData()
  },
  activated() {},
  computed: {
    currentPage() {
      return this.pageParams.pageNo || 1
    },
  },
  filters: {},
  methods: {
    // tab切换
    tabChange(e) {
      console.log(e)
      console.log(this.tabs[e])
      if (e == 2) return
      let item = this.tabs[e]
      this.$router.push({ name: item.path })
    },
    // 点击搜索按钮
    search(e) {
      console.log(e)
      this.queryParam = e
      this.getOrderListData(true)
    },
    listActions(name, row, reason) {
      console.log('操作', name)
      switch (name) {
        case 'order_edit': //编辑
          this.$router.push({ name: 'AdoptOrderDetails', query: { order_id: row.id } })
          break
        case 'order_send': //发货
          this.orderId = row.id
          this.orderInfo = row
          this.isShowSendModal = true
          break
        case 'order_cancel': //取消
          this.cancel(row, 1, 1, reason)
          break
        case 'order_cancel_0': //取消
          this.cancel(row, 0, 0, reason)
          break
        case 'order_cancel_1': //取消
          this.cancel(row, 1, 0, reason)
          break
        case 'order_cancel_verification': //核销
          this.clerk(row.id)
          break
        case 'order_confirm': //确认收货
          this.confirm(row.id)
          break
        case 'order_print': //打印订单
          console.log(name)
          this.orderInfo = row
          this.isShowPrintModal = true
          // this.orderTable(row)
          break
        case 'order_receipts_print': //打印小票
          console.log(name)
          this.orderPrint(row)
          break
        case 'order_remark': //添加备注
          this.orderRemark(row)
          break
        case 'order_recycle': //移入回收站
          console.log(name)
          this.orderRecycle(row)
          break
        case 'order_address': //修改地址
          this.orderId = row.id
          this.isShowAddressModal = true
          break
        case 'apply_0': //拒绝取消
          console.log(name)
          break
        case 'apply_1': //同意取消
          console.log(name)
          break
        case 'order_mature': //成熟
          this.orderMature(row)
          console.log(name)
          break
        case 'order_storage': //入库
          this.orderId = row.id
          this.orderInfo = row
          this.isShowOrderStorageModal = true

          // this.orderStorage(row)
          // console.log(name)
          break
        case 'extra_fee': //额外费用
          this.orderId = row.id
          this.orderInfo = row
          this.isShowOrderExtraFeeModal = true
          // this.form1.resetFields()
          // this.visible = true
          // this.isNew = true
          // this.$router.push({ name: 'AdoptOrderExtraFee', query: { order_id: row.id } })
          break
        case 'order_confirm_self_pick_book':
          // this.orderId = row.id
          // this.orderInfo = row
          // this.isShowOrderStorageModal = true
          this.orderConfirmSelfPickBook(row)
          break
        case 'order_confirm_self_pick_finish':
          // this.orderId = row.id
          // this.orderInfo = row
          // this.isShowOrderStorageModal = true
          this.orderConfirmSelfPickFinish(row)
          break
        default:
          break
      }
    },
    clerk(order_id) {
      var params = {
        order_id: order_id,
      }
      const hide = this.$message.loading('核销中...', 0)
      orderClerk(params)
        .then((res) => {
          console.log(res)
          hide()
          if (res.code !== 0) {
            this.$error({
              content: res.msg,
            })
          } else {
            this.$message.success('成功')
            this.getOrderListData()
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    confirm(order_id) {
      var params = {
        order_id: order_id,
      }
      const hide = this.$message.loading('确认中...', 0)
      orderConfirm(params)
        .then((res) => {
          console.log(res)
          hide()
          if (res.code !== 0) {
            this.$error({
              content: res.msg,
            })
          } else {
            this.$message.success('确认成功')
            this.getOrderListData()
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    onOptionChange(val) {
      console.log(val)
      let status = val.target.value
      if (status == '7') {
        this.queryParam.is_recycle = 1
        this.queryParam.status = ''
        this.getOrderListData()
      } else {
        this.queryParam.is_recycle = 0
        this.queryParam.status = status
        this.getOrderListData()
      }
    },
    cancel(record, status, type, reason) {
      var params = {
        type: type,
        status: status,
        remark: reason,
        id: record.id,
      }
      const hide = this.$message.loading('取消中...', 0)
      orderCancel(params)
        .then((res) => {
          console.log(res)
          hide()
          if (res.code !== 0) {
            this.$error({
              content: res.msg,
            })
          } else {
            this.$message.success('取消订单成功')
            this.getOrderListData()
          }
          this.$nextTick(() => {
            this.$refs['addressModal'].reason = ''
          })
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    orderRemark(row) {
      const h = this.$createElement
      this.$confirm({
        icon: '<>',
        closable: true,
        width: 540,
        title: '添加备注信息',
        maskClosable: true,
        content: h('div', {}, [
          h('a-textarea', {
            props: {
              placeholder: '填写备注',
              autoSize: { minRows: 4, maxRows: 6 },
            },
            on: {
              change: (val) => {
                this.remark = val.target.value
              },
            },
          }),
        ]),
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          const hide = this.$message.loading('取消中...', 0)
          setComments({
            order_id: row.id,
            seller_comments: this.remark,
          }).then((res) => {
            hide()
            if (res.code !== 0) {
              this.$error({
                content: res.msg,
              })
            } else {
              this.$message.success(res.msg)
              this.getOrderListData()
            }
          })
        },
      })
    },
    orderRecycle(row) {
      this.$confirm({
        icon: '<>',
        closable: true,
        width: 540,
        title: '是否移入回收站',
        maskClosable: true,
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          const hide = this.$message.loading('取消中...', 0)
          orderEdit({
            order_id: row.id,
            is_recycle: 1,
          }).then((res) => {
            hide()
            if (res.code !== 0) {
              this.$error({
                content: res.msg,
              })
            } else {
              this.$message.success(res.msg)
            }
          })
        },
      })
    },
    getOrderListData(flag) {
      this.spinning = true
      if (flag) {
        this.pageParams.pageNo = 1
      }
      let params = {
        ...this.queryParam,
        ...this.pageParams,
      }
      getOrderList(params).then((res) => {
        if (res.code === 0) {
          this.expressList = res.data.express_list
          this.pagaData = res.data.data
          this.totalCount = res.data.totalCount
        } else {
          that.$message.error(res.msg)
        }
        this.spinning = false
      })
    },
    resetSearchForm() {
      this.queryParam = {
        dateStart: moment(new Date()),
        dateEnd: moment(new Date()),
      }
    },
    moment,
    calendarChange(date, dateString) {
      this.selectDate = date[0]
    },
    onChange(date, dateString) {
      this.queryParam.dateStart = dateString[0]
      this.queryParam.dateEnd = dateString[1]
    },
    onAfterClose() {
      this.getOrderListData()
    },
    orderPrint(order) {
      const hide = this.$message.loading('提交中...', 0)
      orderPrint({
        order_id: order.id,
      }).then((res) => {
        hide()
        if (res.code !== 0) {
          this.$error({
            content: res.msg,
          })
        } else {
          this.$message.success(res.msg)
        }
      })
    },
    orderTable(order) {
      const hide = this.$message.loading('提交中...', 0)
      orderTable({
        order_id: order.id,
      }).then((res) => {
        hide()
        if (res.code !== 0) {
          this.$error({
            content: res.msg,
          })
        } else {
          this.getOrderListData()
          this.$message.success(res.msg)
        }
      })
    },
    orderMature(row) {
      this.$confirm({
        icon: '<>',
        closable: true,
        width: 540,
        title: '是否成熟',
        maskClosable: true,
        okText: '是',
        cancelText: '否',
        onOk: () => {
          const hide = this.$message.loading('操作中...', 0)
          orderMature({
            order_id: row.id,
            is_mature: 1,
          }).then((res) => {
            console.log(res)
            hide()
            if (res.code !== 0) {
              this.$error({
                content: res.msg,
              })
            } else {
              this.$message.success(res.msg)
              this.getOrderListData()
            }
          })
        },
      })
    },
    orderStorage(row) {
      const h = this.$createElement
      this.$confirm({
        icon: '<>',
        closable: true,
        width: 540,
        title: '添加入库重量（kg）',
        maskClosable: true,
        content: h('div', {}, [
          h('input', {
            props: {
              placeholder: '填写入库重量',
              type: Number,
              // autoSize: { minRows: 4, maxRows: 6 },
            },
            on: {
              change: (val) => {
                this.harvest_weight = val.target.value
              },
            },
          }),
        ]),
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          const hide = this.$message.loading('操作中...', 0)
          orderStorage({
            order_id: row.id,
            harvest_weight: this.harvest_weight,
            is_storage: 1,
          }).then((res) => {
            hide()
            if (res.code !== 0) {
              this.$error({
                content: res.msg,
              })
            } else {
              this.$message.success(res.msg)
              this.getOrderListData()
            }
          })
        },
      })
    },
    orderConfirmSelfPickFinish(row) {
      this.$confirm({
        icon: '<>',
        closable: true,
        width: 540,
        title: '是否确认自采完成',
        maskClosable: true,
        okText: '是',
        cancelText: '否',
        onOk: () => {
          const hide = this.$message.loading('操作中...', 0)
          orderConfirmSelfPickFinish({
            order_id: row.id,
            is_confirm_self_pick: 1,
          }).then((res) => {
            console.log(res)
            hide()
            if (res.code !== 0) {
              this.$error({
                content: res.msg,
              })
            } else {
              this.$message.success(res.msg)
              this.getOrderListData()
            }
          })
        },
      })
    },
    orderConfirmSelfPickBook(row) {
      this.$confirm({
        icon: '<>',
        closable: true,
        width: 540,
        title: '是否确认自采预约',
        maskClosable: true,
        okText: '是',
        cancelText: '否',
        onOk: () => {
          const hide = this.$message.loading('操作中...', 0)
          orderConfirmSelfPickBook({
            order_id: row.id,
            is_confirm_self_pick_book: 1,
          }).then((res) => {
            console.log(res)
            hide()
            if (res.code !== 0) {
              this.$error({
                content: res.msg,
              })
            } else {
              this.$message.success(res.msg)
              this.getOrderListData()
            }
          })
        },
      })
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-card-head {
  border-bottom: none;
}
.top_card {
  /deep/.ant-card-body {
    padding-bottom: 0;
  }
  /deep/.ant-tabs-bar {
    margin-bottom: 0;
    border-bottom: 1px solid #fff;
  }
}
</style>
